import roleApi from "@/views/api/system/role/role";
import menuApi from '@/views/api/system/menu/menu';

export default {
    data() {
        return {
            listLoading: false,
            dialogFormVisible: false,
            formLabelWidth: '100px',
            currentRow: '',
            form: {
                name: '',
                description: '',
            },
            pageParams: {
                current: '',
                pages: '',
                size: '',
                total: 0,
            },
            listQuery: {
                page: 1,
                pageSize: 5,
                name: undefined
            },
            list: [],
            treeVisible: false,
            data: [],
            props: {
                label: 'name',
            },
            extend: [],
            checked: []
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.fetchData()
            this.getMenuData()
        },
        async fetchData() {
            this.listLoading = true
            let { data } = await roleApi.getPage(this.listQuery)
            this.list  = data.records;
            this.listLoading = false;
            this.pageParams.total = data.total

        },
        getMenuData() {
            menuApi.getTreeMenu().then(response => {
                this.data = response.data
                this.extend = this.data.map(item => item.id)
            })
        },
        async openPermissionTree(roleId) {
            sessionStorage.setItem('roleId', roleId)
            const { data } = await roleApi.getPermissionInfo(roleId)
            this.checked = data.map(item => item.menuId)
            this.$nextTick(() => {
                this.$refs.tree.setCheckedKeys(this.checked)
            })
            setTimeout(() => {
                this.treeVisible = true
            })
        },
        savePermission() {
            const roleId = sessionStorage.getItem('roleId')
            roleApi.setRolePermission(roleId, this.$refs.tree.getCheckedKeys()).then(response => {
                this.$message({
                    message: '权限分配成功',
                    type: 'success'
                })
                this.treeVisible = false
                this.fetchData()
            })
        },
        add() {
            this.isAdd = true
            this.resetForm()
            this.dialogFormVisible = true
        },
        resetForm() {
            for (let item of Object.keys(this.form)) {
                this.form[item] = ''
            }
        },
        remove(row) {
            if (row === '') {
                this.$message({
                    message: '请选择要删除的数据',
                    type: 'warning'
                })
            } else {
                this.$confirm('您确定要删除这条数据吗？').then(() => {
                    roleApi.remove(row.id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        if (this.pageParams.current === this.pageParams.pages && this.pageParams.total % this.pageParams.size === 1){
                            this.listQuery.page--
                        }
                        this.fetchData()
                    })
                })
            }
        },
        edit(row) {
            if (row === '') {
                this.$message({
                    message: '请选择所要编辑的数据',
                    type: 'warning'
                })
            } else {
                this.form = this.userList.find(item => item.id === row.id)
                this.isAdd = false
                this.dialogFormVisible = true
            }

        },
        search() {
            this.fetchData()
        },
        reset() {
            this.listQuery.name = ''
            // this.listQuery.description = ''
            this.fetchData()
        },
        save() {
            if (this.isAdd) {
                // 添加
                roleApi.add(this.form).then(() => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.fetchData()
                }).catch(() => {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                })
            } else {
                roleApi.update(this.form).then(() => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.fetchData()
                }).catch(() => {
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    })
                })
            }
            this.dialogFormVisible = false
        },
        changeSize(limit) {
            this.listQuery.limit = limit
            this.fetchData()
        },
        fetchPage(page) {
            this.listQuery.page = page
            this.fetchData()
        },
        fetchNext() {
            this.listQuery.page = this.listQuery.page + 1
            this.fetchData()
        },
        fetchPrev() {
            this.listQuery.page = this.listQuery.page - 1
            this.fetchData()
        },
        handleCurrentChange(currentRow, oldCurrentRow) {
            this.currentRow = currentRow;
        }
    }
}
